<template>
  <view class="contenter">
    <view class="heads u-flex">
      <view class="sreach u-flex flex_bt" >
        <view class="u-flex">
          <view class="icon">
            <u-icon name="search"  color="#999999" size="30"></u-icon>
          </view>
          <view>
            <u-input :clearable="false" v-model="search" placeholder="订单号/电话" type="text" :border="false" :height="68" />
          </view>
        </view>
        <view class="change" @click="sreachData">搜索</view>
      </view>
      <view class="u-margin-left-30 hexiao" @click="showModal = true;title='核销'">核销</view>
    </view>
    <indextime :Show="false" @time="time" :type="1"></indextime>
    <view class="swiper-content">
      <view>
        <u-tabs-swiper :current="current" ref="tabs" height="102" inactive-color="#7b7b7b"
                       :list="list" :is-scroll="false" @change="tabsChange"
                       font-size="32" bar-height="10" bar-width="90"
                       :bar-style="{bottom:'16rpx',background:'#45806E',borderRadius: '30rpx'}" :active-item-style="{color:'#000'}"
        ></u-tabs-swiper>
      </view>
      <swiper class="swiper-box"  :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
        <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
            <view class="main">
              <view class="item " v-for="(data,indexon) in dataList" :key="indexon" @click.stop="orDetail(data)">
                <view class="top">
                  <view class="u-flex flex_bt">
                    <view>订单编号：{{data.orderid}}</view>
                    <view class="price" v-if="data.after_sale == 1 ">买家退款申请</view>
                    <view class="price" v-if="data.after_sale == 2 ">买家退款成功</view>
                    <view class="price" v-if="data.after_sale == 3 ">买家退款失败</view>
                    <view class="price" v-if="data.after_sale == 0" v-html="status(data.status)"></view>

                  </view>
                  <view class="u-margin-top-20">下单时间：{{data.create_time}}</view>
                </view>
                <view class="cons flex" v-for="(order,indexTwo) in data.goods" :key="indexTwo">
                  <item-image :img="order.image" :height="160" :width="160"></item-image>
                  <view class="u-margin-left-20 flex flex_bt flex-column nei">
                    <view class="name">{{order.name}}</view>
                    <view class="u-flex flex_bt">
                      <view class="price">￥{{order.goods_price}}</view>
                      <view class="num">X{{order.gnum}}</view>
                    </view>
                  </view>
                </view>
                <view class=" bottm u-flex flex_bt">
                  <view class="name u-flex">总金额：<view class="price">￥{{data.price}}</view></view>

                  <view class="green_1 button" v-if="data.after_sale==0 && data.address_type==2 && data.status == 4" @click.stop="deliverGoods(data,0)">去发货</view>
                  <view class="green button" v-if="data.after_sale==0 && data.address_type==1 && data.status != 2 && data.status != 1  && data.status != 3  && data.status != 8 " @click.stop="deliverGoods(data,1)">去核销</view>
                  <view v-if="data.address_type==2 && data.status != 4">
                    <view class="green button" v-if=" data.status == 2 || data.status == 3|| data.status == 8 " @click.stop="wuliu(data)">查看物流</view>
                  </view>

                  <view class="green button"  v-if="type  == 4 && data.status == 8" @click.stop="lookComent(data)">查看评价</view>
                  <view class="green button"  v-if="data.after_sale != 0 && type == 5 && data.after_sale != 2">去处理</view>
                </view>
              </view>
            </view>
            <view class="loading_text">
              <text>{{loadingText || '暂无数据'}}</text>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!--选择-->
    <OrderDeliver v-if="showModal" :list="explist" ef="child"  :title="title" @submit="endSever" @close="close"  ></OrderDeliver>
  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
import StoreChange from "../../components/item/storeChange";
import UTabsSwiper from "../../uview-ui/components/u-tabs-swiper/u-tabs-swiper";
import OrderDeliver from "../../components/order/orderDeliver";
export default {
  name: "index",
  components: {OrderDeliver, UTabsSwiper, StoreChange, Indextime},
  data(){
    return{
      loadingText:'',
      dataList:[],
      formData:{},
      allpage:'',
      month:'',
      page:1,
      priceAll:0,
      explist:[],
      search:'',
      start_time:'',
      end_time:'',
      type:1,
      title:'填写物流单号',
      height:0,
      list: [{
        name: '待发货'
      },{
        name: '已发货'
      }, {
        name: '已收货'
      }, {
        name: '已完成',
      }, {
        name: '售后',
      }],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      show:false,
      TransferOrderShow:false,//转单
      showModal:false,//发货弹框控制
      selectorObj: [
        {
          cateName: '1',
          id: 1
        },
        {
          cateName: '2',
          id: 2
        }
      ],
    }
  },
  onLoad(option){
    // if(option.type){
    //   this.current = option.type
    //   this.swiperCurrent = option.type
    // }
    this.setData()
  },
  computed:{

  },
  methods:{
    //筛选时间
    time(time){
      this.start_time = time.start_time
      this.end_time = time.end_time
      this.closeData()
    },
    //订单详情
    orDetail(data){
      this.$u.route({
        url:'/pagesA/commodityOrder/detail',
        params: {
          id: data.orderid,
        }
      })
    },
    //发货 核销
    deliverGoods(data,index){
      if(index == 1) this.title = '核销'
      if(index == 0) this.title = '去发货'
      this.formData = data
      this.showModal = true
    },
    //状态
    status(data){
      switch (data){
        case 1:return '待付款'
        case 2:return '待收货'
        case 3:return '待评价'
        case 4:return '待发货'
        case 6:return '已取消'
        case 8:return '已评价'
      }
    },
    //初始化
    setData(){
      this.expList()
      this.orderList()
    },
    //獲取订单列表
    orderList(){
      let form = {
        start_time:this.start_time,
        end_time:this.end_time,
        search:this.search,
        limit:10,
        page:this.page || 1,
        type:this.type
      }
      let that = this
      this.$api.OrderList(form).then(res => {
        this.allpage = res.data.last_page
        that.dataList = [...that.dataList,...res.data.data]
      })
    },
    //查询物流
    expList(){
      this.$api.expList().then(res => {
        this.explist = res.data
      })
    },
    //跳转物流
    wuliu(data){
      this.$u.route({
        url:'/pages/logistics/index',
        params: {
          id: data.orderid,
        }
      })
    },
    //查看评价
    lookComent(data){
      this.$u.route({
        url:'/pagesA/evaluate/index',
        params: {
          id: data.id,
          type:2
        }
      })
    },
    //开始服务弹框
    aginOrder(){
      this.show=true
    },

    // 确认发货 核销
    endSever(data){
      if(data.number){
        this.$api.writeOff({code:data.number}).then(res => {
          this.$u.toast('核销成功')
          this.showModal = false
          this.closeData()
        })
      }else {
        let form = {
          type:1,
          wname:data.data.ecode,
          waybillno:data.code,
          orderid:this.formData.orderid,
        }
        this.$api.OrderStatus(form).then(res => {
          this.$u.toast('发货成功')
          this.showModal = false
          this.closeData()
        })
      }
    },
    //清空条件
    closeData(){
      this.dataList = []
      this.page = 1
      this.loadingText = ''
      this.search = ''
      this.orderList()
    },
    sreachData(){
      this.dataList = []
      this.page = 1
      this.loadingText = ''
      this.orderList()
    },
    close(){
      this.showModal = false
    },
    //选择物流公司
    confirm(){},
    order(index){
      console.log(index)
      // 1普通订单详情 ，2取消的订单详情
      if(index == 2){
        this.$u.route({
          url:'/pagesA/orderDetail/index',
          params: {
            id: 5
          }
        })
      }

    },
    // tabs通知swiper切换 请求数据
    tabsChange(index) {
      this.swiperCurrent = index;
      this.type = index+1 //1-待发货 2-已发货 3-已收货 4-已完成 5售后
      this.closeData()
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;

      this.$refs.tabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.orderList()
    }
  }
}
</script>

<style scoped lang="scss">
.head{
  border-top: 2rpx solid $uni-border-color;
  background: white;
}
.heads{
  border-top: 2rpx solid $uni-border-color;
  background: white;
  padding: 20rpx 0;
  .sreach{
    background: white;
    width: 564rpx;
    margin-left: 32rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
    height: 68rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    .icon{
      margin-right: 16rpx;
    }
    .change{
      font-size: 28rpx;
      font-weight: bold;
      color: #0F4C3A;
    }
  }
  .hexiao{
    width: 92rpx;
    height: 68rpx;
    background: #0F4C3A;
    border: 2rpx solid #E4E4E4;
    opacity: 0.9;
    border-radius: 8rpx;
    text-align: center;
    color: white;
    line-height: 68rpx;
    font-size: 28rpx;
    font-weight: bold
  }
}
.swiper-content{
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.title{
  font-size: 34rpx;
  height: 120rpx;
  border: 2rpx solid #F4F4F4;
  color: #4b4b4b;
}
.con{
  padding: 30rpx 50rpx;
  .u-flex{
    font-size: 32rpx;
    color: #4b4b4b;
    margin-bottom: 40rpx;
  }
  .bt{
    margin: 50rpx 0 ;
  }

}
.main{
  margin: 0 32rpx;
}
.item{
  background: white;
  padding-left: 16rpx;
  padding-right: 18rpx;
  padding-top: 34rpx;
  padding-bottom: 14rpx;
  margin-top: 20rpx;
  border-radius: 12rpx;
  .top{
    font-size: 24rpx;
    color: #898989;
    border-bottom: 2rpx solid $uni-border-color;
    padding-bottom: 20rpx;
    .price{
      color: $uni-color-price;
      font-size: 28rpx;
    }
  }
  .cons{
    padding: 20rpx 0;
    border-bottom: 2rpx solid $uni-border-color;
    .nei{
      height: 160rpx;
      width: 100%;
      .name{
        font-size: 32rpx;
        color: #3B3B3B;
      }
      .price{
        color: $uni-color-price;
        font-size: 36rpx;
      }
      .num{
        color: #0F4C3A;
      }
    }
  }
  .bottm{
    padding: 14rpx 0;
    .price{
      color: $uni-color-price;
      font-size: 36rpx;
    }
    .name{
      font-size: 28rpx;
      color: #7B7B7B;
    }
  }
  .button{
    width: 160rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-radius: 8rpx;
    font-weight: bold;
  }
  .green{
    color: white;
    background: $uni-color-primary;
    border: 2rpx solid $uni-color-primary;
  }
  .og{
    color:$uni-color-price;
    border: 2rpx solid $uni-color-price;
  }
  .gary{
    background: #F2F2F2;
    border: 2rpx solid $uni-border-color;
    color: $uni-text-color;
  }
  .green_1{
    color:  $uni-color-primary;
    background: white;
    border: 2rpx solid $uni-color-primary;
  }

}

</style>
